<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="/the-good-thing-of-wang-feizhai/vue_basic/js/vue.js"></script> -->
    <script src="/vue_basic/js/vue.js"></script>
    <style>
        .basic {}

        .happy {}

        .sad {}

        .normal {}

        .atguigu1 {}

        .atguigu2 {}

        .atguigu3 {}
    </style>
</head>

<body>

<!-- 
    绑定样式:

        1.class样式
            写法:class="xxx"xXx可以是字符串、对象、数组。
                宁符串写法适用于:类名不确定,要动态获取。
                对象写法适用于:要绑定多个样式,个数不确定，名字也不确定。
                数组写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用。
        2. style样式
            :style="{fontsize: xxx}"其中xxx是动态值。
            :style="[a,b]"其中a、b是样式对象。 
-->

    <div id="root">
        <!-- shift():移除数组中的第一个元素 -->
        <!-- 绑定class样式 <<字符串写法>>,适用于:样式的类名不确定,需要动态指定-->
        <!-- 动态绑定(单项) -->
        <div class="basic" :class="mood" @click="chhangeMood">{{name}}</div>


        <!-- 绑定class样式 <<数组写法>>,适用于:要绑定的样式个数不确定、名字也不确定-->
        <div class="basic" :class="classArr">{{name}}</div>
        <!-- 使用v-bind后:class="['atguigu1','atguigu2','atguigu3']"双引号里的内容为表达式 -->
        <!-- 未删掉单引号后数组中的内容为字符串 -->
        <!-- <div class="basic" :class="['atguigu1','atguigu2','atguigu3']" @click="chhangeMood">{{name}}</div> -->
        <!-- 删掉单引号后数组中的内容为变量,Vue会到data中寻找相符的变量,找不到会报错 -->
        <!-- <div class="basic" :class="[atguigu1,atguigu2,atguigu3]" @click="chhangeMood">{{name}}</div> -->


        <!-- 绑定class样式 <<对象写法>>,适用于:要绑定的样式个数确定、名字也确定，但要动态决定用不用-->
        <div class="basic" :class="classObj">{{name}}</div>



        <!-- 绑定style样式 <<对象写法>> -->
        <!--  报错,因为font-size: fsize;是会被当成表达式 -->
        <!-- <div class="basic" :style="font-size: fsize;">{{name}}</div> -->
        <!-- 如果要正常的书写应该将"font-size: fsize;"写成一个对象"{fontSize: fsize;}" -->
        <!-- key     value-->
        <!-- <div class="basic" :style="{fontSize: fsize+'px';}">{{name}}</div> -->
        <div class="basic" :style="stylrObj">{{name}}</div>



        <!-- 绑定style样式 <<数组写法>> -->
        <!-- 不常用 -->
        <div class="basic" :style="styleArr">{{name}}</div>
    </div>
</body>
<script>
    const vm = new Vue({
        el: '#root',
        data: {
            name: 'joy',
            mood: 'normal',
            classArr: ['atguigu1', 'atguigu2', 'atguigu3'],
            // 这些Key不可以瞎写,因为这些Key都是style标签中有或是原始的CSS中有
            classObj: {
                atguigu1: false,
                atguigu2: false,
            },
            stylrObj: {
                fontSize: '40px',
                color: 'red',
            },
            stylrObj2: {
                backgroundColor: 'orange',
            },
            styleArr: [
                {
                    fontSize: '40px',
                    color: 'red',
                },
                {
                    backgroundColor: 'orange',
                }
            ]

        },
        methods: {
            chaneMood() {
                const arr = ['happy', 'sad', 'normal']
                // floor:向下取整;Math.random:随机获取[0,1)
                const index = Math.floor(Math.random() * 3)
                this.mood = arr[index]
            }
        },
    })
</script>

</html>